<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    cancelText="取消"
    okText="提交"
    @cancel="dialogStatus==='add'?doShowModalAddCancle():doShowModalEditCancle()"
    @ok="dialogStatus==='add'?doShowModalAdd():doShowModalEdit()"
  >
    <a-form :form="form" name="horizontal_login">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="唯一识别码" hasFeedback validateStatus="success">
        <a-input placeholder="唯一识别码" v-model="mdl.id" name="id" v-decorator="['id', {}]" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单名称" hasFeedback validateStatus="success">
        <a-input placeholder="起一个名字" v-model="mdl.name" id="name" name="name"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="组件名称" hasFeedback validateStatus="success">
        <a-input placeholder="组件名称" v-model="mdl.component" name="component" id="component" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="meta" hasFeedback validateStatus="success">
        <a-input placeholder="meta" v-model.trim="mdl.meta" name="meta" id="meta" v-model="objectToJson" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态" hasFeedback validateStatus="warning">
        <a-select v-model="mdl.status" name="status">
          <a-select-option value="0">正常</a-select-option>
          <a-select-option value="1">禁用</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述" hasFeedback>
        <a-textarea :rows="5" v-model="mdl.des" placeholder="..." name="des" id="des"/>
      </a-form-item>
      <a-divider />
    </a-form>
  </a-modal>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'MenuModal',
    data () {
      return {
        visible: false,
        mdl: {},
        dialogStatus: ''
      }
    },
    beforeCreate () {
      this.form = this.$form.createForm(this)
      console.log('form::', this.form)
    },
    computed: {
      objectToJson: {
        get () {
          // debugger
          const meta = JSON.stringify(this.mdl.meta)
          return meta
          // return this.bank_account.replace(/\s/g, ''())
        },
        set (val) {
          // this.mdl.meta = val
        }
      }
    },
    methods: {
      ...mapActions(['MenuAdd']),
      add () {
        debugger
        this.$message.info(this.visible, '-')
        this.edit({ id: 0 })
      },
      edit (record) {
        debugger
        this.$message.info(record)
        this.mdl = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...record })
        })
      },
      doShowModalEditCancle () {
        this.visible = false;
        this.dialogStatus = ''
        console.log('edit cancel')
      },
      doShowModalEdit () {
        this.visible = true;
        this.$message.info('edit ok')
      },
      doShowModalAddCancle () {
        this.visible = false;
        this.dialogStatus = ''
        console.log('add cancel')
      },
      doShowModalAdd () {
        debugger
        this.$message.info('创建')
        this.form.validateFields((err, antMenu2) => {
          debugger
          if (!err) {
            console.log('antMenu2', antMenu2)
          }
          this.$message.info(antMenu2)
          if (err) {
            return;
          }
          // console.log('Received antMenu2 of form: ', antMenu2);
          this.$message.info('modal form submit', antMenu2)
          const {
            MenuAdd
          } = this
          // console.log('params:', antMenu2);
          this.loading = true;
          MenuAdd({
              antMenu2
          }).then(data => {
            debugger
            // console.log('-----------MenuAdd--------' + data)
          });
          this.form.resetFields();
          this.visible = false;
          this.fetchs({
              pageSize: 5,
              pageNum: 1
          });
          this.fetchs2({
              pageSize: 5,
              pageNum: 1
          });
        });
      }
    }
  }
</script>

<style>
</style>
